<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head th:replace="common/header::common_head"></head>
<title>打印模板</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.7 -->

<!-- AdminLTE Skins. Choose a skin from the css/skins
     folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../../dist/css/print/bootstrap.css">
<link rel="stylesheet" href="../../dist/css/print/bootstrap-theme.css">
<link rel="stylesheet" href="../../dist/css/print/font-awesome.css">
<link rel="stylesheet" href="../../dist/css/print/font-awesome-ie7.css">
<link rel="stylesheet" href="../../dist/css/print/lamp.css">
<link rel="stylesheet" href="../../dist/css/print/select2.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<![endif]-->
<script src="http://localhost:18000/CLodopfuncs.js?priority=0"></script>
<script src="http://localhost:8000/CLodopfuncs.js?priority=1"></script>
<!-- Google Font -->

<body class="hold-transition skin-blue sidebar-mini">
<div th:replace="common/LeftCommon::common_top_left"></div>
<div class="wrapper">
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                打印模板
                <small>PrintModel</small>
            </h1>
            <ol class="breadcrumb">
                <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">系统设置</a></li>
                <li class="active">打印模板</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <!-- row -->
            <div class="row">
                <div class="col-xs-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title"><i class="fa fa-codepen"></i>&nbsp;模板设计器&nbsp;
                                <label class="designer-template-label tplName" name="tplName" id="tplName"></label>
                                <div class="pull-right">
                                    <div class="btn-group"  style="margin-top: 2px;">
                                        <button class="btn btn-primary btn-xs" type="button" role="btn" data-btnid="tplSettings">模板设置</button>
                                        <button class="btn btn-primary btn-xs" type="button" role="btn" data-btnid="preview">打印预览</button>
                                        <button class="btn btn-warning btn-xs" type="button" role="btn" data-btnid="print">直接打印</button>
                                    </div>
                                    <div class="btn-group"  style="margin-top: 2px;">
                                        <button class="btn btn-primary btn-xs" type="button" name="getTemplateBtn" id="getTemplateBtn" role="btn" data-btnid="getTemplate">获取模板</button>
                                        <button class="btn btn-success btn-xs" type="button" role="btn" data-btnid="saveTemplate">保存模板</button>
                                        <button class="btn btn-warning btn-xs" type="button" role="btn" data-btnid="closeDesigner">关闭</button>
                                    </div>
                                </div>
                            </h4>
                        </div>
                        <!-- body begin -->
                        <div class="panel-body">
                            <div class="col-sm-12 panel-heading LampToolsContainer">
                            </div>
                            <div class="col-sm-12 line-horizontal" ></div>
                            <!-- Designed Container Begin -->
                            <div class="col-sm-9 col-lg-9 col-xs-9 DesignedContainer" data-lampDesigner="{}">
                                <div name="div01" lamp="lodop" data-lodop="html">
                                    <table name="tplTop" width="100%">
                                        <caption role="item" class="tplCaption" name="item1" style="vertical-align: center">发货单</caption>
                                        <div role="item" class="tplBarcode" style="z-index:99;position: absolute;right: 10px;text-align: center;padding-right: 2px;padding-top: 4px;min-width:30px;min-height: 20px;"
                                             name="item2" data-type="barcode"></div>
                                        <tbody>
                                        <tr>
                                            <td role="item" width="10%" class="text-right" name="item3"><span>发货单号:</span></td><td role="item" class="text-left" width="22%" name="item4"></td>
                                            <td role="item" width="10%" class="text-right" name="item5"><span >发货仓库:</span></td><td role="item" class="text-left" width="24%" name="item6"></td>
                                            <td role="item" width="10%" class="text-right" name="item7">买家昵称:</td><td role="item" class="text-left" width="24%" name="item8"></td>
                                        </tr>
                                        <tr>
                                            <td role="item" width="10%" class="text-right" name="item9">快递公司:</td><td role="item" class="text-left" width="22%" name="item10"></td>
                                            <td role="item" width="10%" class="text-right" name="item11"></td><td role="item" class="text-left" width="24%" name="item12"></td>
                                            <td role="item" width="10%" class="text-right" name="item13"></td><td role="item" class="text-left" width="24%" name="item14"></td>
                                        </tr>
                                        <tr>
                                            <td role="item" width="10%" class="text-right" name="item15">买家地址:</td><td role="item" width="90%" class="text-left" colspan="5" name="item16"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div lamp="lodop" data-lodop="html" name="div02">
                                    <table  width="100%" ><tr><td role="item" style="height: 20px;" name="item17"></td></tr></table>
                                </div>
                                <div id="tplMiddleContainer" class="tplMiddleContainer" lamp="lodop" data-type="table" name="div03">
                                    <table width="100%" style="border: 1px solid #8c8c8c;" border="1px" role="item" name="item18" cellspacing="0" cellpadding="0" data-type="table">
                                        <thead>
                                        <tr><th data-index="goodsName">商品名称</th><th data-index="goodsCode">商品编码</th><th data-index="specDesc">商品规格</th><th data-index="amount">数量</th><th data-index="subtotal">金额</th></tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                                <div lamp="lodop" data-lodop="html" name="div04">
                                    <div role="item" style="height: 20px;" name="item19"></div>
                                    <!--<table  width="100%"><tr><td role="item" style="height: 20px;" name="item19"></td></tr></table>-->
                                </div>
                                <div id="tplBottomContainer"  lamp="lodop" data-lodop="html" name="div05">
                                    <table name="tt" width="100%" height="100%">
                                        <tbody>
                                        <tr><td role="item" width="10%"  class="text-right" name="item20">店铺：</td><td  role="item" name="item21"></td><td  role="item" width="15%" class="text-right" name="item22"></td><td  role="item" width="20%" name="item23"></td></tr>
                                        <tr><td role="item" width="10%"  class="text-right" name="item24">商家备注：</td><td  role="item" name="item25"></td><td  role="item" width="15%" class="text-right" name="item26"></td><td  role="item" width="20%" name="item27"></td></tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- Designed Container End -->
                            <div class="panel-group col-sm-3 col-lg-3 col-xs-3 propertyContainer" id="PropertyContainer" role="tablist" aria-multiselectable="true">
                                <div class="panel panel-default" style="display: none;">
                                    <table cellspacing="0" cellpadding="0" width="100%" class="lampTTP" name="tplSetting">
                                        <caption style="text-align: center;">模板设置</caption>
                                        <span  style="position: absolute;right:20px;" role="hideBtn"> <a href="#"><i class="fa fa-eye-slash fa-w-18 "></i> 隐藏</a></span>
                                        <tbody>
                                        <tr><td width="35%">模板名称：</td>
                                            <td  style="text-align: left">
                                                <input type="text" name="tplName" role="setupCtl">
                                            </td>
                                        </tr>
                                        <tr><td width="35%">页边距(mm)：</td>
                                            <td style="text-align: left">
                                                <table cellpadding="0" cellspacing="0" style="border:none;width: 100%;">
                                                    <tr>
                                                        <td style="border: none;">左:<input type="number" name="left" role="setupCtl" style="max-width: 80px;"></td>
                                                        <td style="border: none;">右:<input type="number" name="right" role="setupCtl" style="max-width: 80px;"></td>
                                                    </tr>
                                                    <tr>
                                                        <td style="border: none;">上:<input type="number" name="top" role="setupCtl" style="max-width: 80px;"></td>
                                                        <td style="border: none;">下:<input type="number" name="bottom" role="setupCtl" style="max-width: 80px;"></td>
                                                    </tr>
                                                </table>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="35%">纸张类型：</td>
                                            <td style="max-width: 200px;text-align: left" colspan="2" >
                                                <select name="paperType" role="setupCtl" data-allowClear="true">
                                                    <option></option>
                                                </select>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td width="35%">自定义：</td>
                                            <td style="text-align: left">
                                                宽：<input type="number" name="pageWidth" role="setupCtl" style="max-width: 120px;">(mm)
                                                <div style="height:4px;"></div>
                                                高：<input type="number" name="pageHeight" role="setupCtl" style="max-width: 120px;">(mm)
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="panel panel-default">
                                    <table cellspacing="0" cellpadding="0" width="100%" class="lampTTP" name="printSetting">
                                        <thead><tr><th colspan="4">打印机设置</th></tr></thead>
                                        <tbody>
                                        <tr><td width="15%">名称:</td><td colspan="3" style="max-width: 300px;"><select name="printer" role="setupCtl" ></select></td></tr>
                                        <tr><td width="15%">大小:</td><td colspan="2" width="35%"><select name="paperSize" role="setupCtl"></select></td><td colspan="1" ></td></tr>
                                        <tr><td width="15%">方向:</td><td colspan="3" style="max-width: 300px;"><select name="paperOrient" role="setupCtl"></select></td></tr>
                                        <tr><td colspan="5" role="setupCtl" name="selectionPrinter"></td></tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="panel panel-default">
                                    <table class="lampTTP" name="itemCfg" id="itemCfg">
                                        <caption style="text-align: center;">模板ITEM配置</caption>
                                        <span  style="position: absolute;right:20px;" role="btn" data-btnid="propsCtrlRefresh"> <a href="#"><i class="fa fa-refresh "></i> 刷新</a></span>
                                        <thead>
                                        <tr><th width="40%">属性</th><th>值</th></tr>
                                        </thead>
                                        <tbody>
                                        <tr><td>内容类型</td><td><span role="itemCtl" name="itemType" id="itemType" data-ctrl-type="type"></span> </td></tr>
                                        <tr><td>name</td><td ><span role="itemCtl" name="itemPK" id="itemPK" data-ctrl-type="name"></span></td></tr>
                                        <tr><td>别名（alias）</td><td ><input type="text" role="itemCtl" name="itemAlias" id="itemAlias" data-ctrl-type="alias" ></td></tr>
                                        <tr>
                                            <td>内容<span class="text-danger">*</span><br>
                                                <a href="#" name="selectMetaOps" role="operateCtl" class="btn btn-link btn-sm">选择数据项</a>
                                            </td>
                                            <td>
                                                <textarea role="itemCtl" name="itemContent" id="itemContent" data-ctrl-type="content" ></textarea>
                                            </td>
                                        </tr>
                                        <tr><td>字体</td><td class="text-left"><select role="itemCtl" name="itemFontName" id="itemFontName" multiple="multiple" data-ctrl-type="fontName">
                                        </select></td></tr>
                                        <tr><td>字号</td><td><input role="itemCtl" type="text" name="itemFontSize" id="itemFontSize" data-ctrl-type="fontSize" ></td></tr>
                                        <!--
                                        <tr><td>Top</td><td><input role="itemCtl" type="text" name="top"></td></tr>
                                        <tr><td>Left</td><td><input role="itemCtl" type="text" name="left"></td></tr>
                                        -->
                                        <tr><td>width</td><td><input role="itemCtl" type="text" name="itemWidth" id="itemWidth" data-ctrl-type="width"></td></tr>
                                        <tr><td>height</td><td><input role="itemCtl" type="text" name="itemHeight" id="itemHeight" data-ctrl-type="height"></td></tr>
                                        <tr class="hide"><td>显示(z-index)</td><td>暂未启用</td></tr>
                                        <tr><td>条码类型</td><td class="text-left"><select role="itemCtl" name="barcodeMode" id="barcodeMode" data-ctrl-type="barcode">
                                        </select> </td></tr>
                                        <tr><td>Table标题</td><td><input role="itemCtl" type="text" name="tableCaption" id="tableCaption" data-ctrl-type="caption"></td></tr>
                                        <tr><td colspan="2" style="text-align: left;"><span style="color: red">说明:</span><br><p role="itemCtl" class="itemRemark" id="itemRemark"  data-ctrl-type="comment"></p> </td></tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="panel panel-default" id="TBCfgContainer" style="display: none;">
                                    <table class="lampTTP" name="lampTTP" id="lampTTP" role="table" data-ctrl-type="lampTable" cellpadding="0" cellspacing="0">
                                        <caption style="text-align: center">列表显示设置</caption><span style="position: absolute;right:20px;" role="btn" data-btnid="propsCtrlRefresh"><a href="#" class="refreshGrid" ><i class="fa fa-refresh "></i> 刷新</a></span>
                                        <thead>
                                        <tr class="text-center">
                                            <th width="60%">列名</th><th width="15%">隐藏</th><th >列宽</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>
    </div>
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Create the tabs -->
        <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
            <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>

            <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <!-- Home tab content -->
            <div class="tab-pane" id="control-sidebar-home-tab">
                <h3 class="control-sidebar-heading">Recent Activity</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-birthday-cake bg-red"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

                                <p>Will be 23 on April 24th</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-user bg-yellow"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>

                                <p>New phone +1(800)555-1234</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>

                                <p>nora@example.com</p>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <i class="menu-icon fa fa-file-code-o bg-green"></i>

                            <div class="menu-info">
                                <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>

                                <p>Execution time 5 seconds</p>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

                <h3 class="control-sidebar-heading">Tasks Progress</h3>
                <ul class="control-sidebar-menu">
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Custom Template Design
                                <span class="label label-danger pull-right">70%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Update Resume
                                <span class="label label-success pull-right">95%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-success" style="width: 95%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Laravel Integration
                                <span class="label label-warning pull-right">50%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:void(0)">
                            <h4 class="control-sidebar-subheading">
                                Back End Framework
                                <span class="label label-primary pull-right">68%</span>
                            </h4>

                            <div class="progress progress-xxs">
                                <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
                            </div>
                        </a>
                    </li>
                </ul>
                <!-- /.control-sidebar-menu -->

            </div>
            <!-- /.tab-pane -->
            <!-- Stats tab content -->
            <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
            <!-- /.tab-pane -->
            <!-- Settings tab content -->
            <div class="tab-pane" id="control-sidebar-settings-tab">
                <form method="post">
                    <h3 class="control-sidebar-heading">General Settings</h3>

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Report panel usage
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Some information about this general settings option
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Allow mail redirect
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Other sets of options are available
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Expose author name in posts
                            <input type="checkbox" class="pull-right" checked>
                        </label>

                        <p>
                            Allow the user to show his name in blog posts
                        </p>
                    </div>
                    <!-- /.form-group -->

                    <h3 class="control-sidebar-heading">Chat Settings</h3>

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Show me as online
                            <input type="checkbox" class="pull-right" checked>
                        </label>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Turn off notifications
                            <input type="checkbox" class="pull-right">
                        </label>
                    </div>
                    <!-- /.form-group -->

                    <div class="form-group">
                        <label class="control-sidebar-subheading">
                            Delete chat history
                            <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
                        </label>
                    </div>
                    <!-- /.form-group -->
                </form>
            </div>
            <!-- /.tab-pane -->
        </div>
    </aside>
    <div class="control-sidebar-bg"></div>
    <footer th:replace="common/footer::common_footer"></footer>
</div>

<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Slimscroll -->
<script src="../../bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<!-- iCheck -->
<script src="../../plugins/iCheck/icheck.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="../../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Page Script -->
<script src="../../dist/js/print/select2.full.min.js"></script>
<script src="../../dist/js/print/bootstrap.js?v=3.3.7"></script>
<script src="../../dist/js/print/i18n/zh-CN.js"></script>
<script src="../../dist/js/print/jquery.tablednd.js" ></script>
<script src="../../dist/js/print/jquery-barcode.js"></script>
<script src="../../dist/js/print/templete-b2c-delivery.js"></script>
<script src="../../dist/js/print/designed.properties.js"></script>
<script src="../../dist/js/print/designed.b2c.delivery.tpl.js"></script>

<script>
    var LODOP;
    if(typeof getCLodop == 'function'){
        LODOP = getCLodop();//云控件优先
    }
    if(typeof getLodop == 'function'){
        if(!LODOP)LODOP=getLodop();
    }
    $(document).ready(function () {
        /**
         *
         */
        //var tt = $("#lampTTP").tableDnD();

        if(!LODOP){
            alert("lodop 控件未安装，请先安装！");
        }else {
            var $lamp = $(".DesignedContainer").lampDesigner(DeliveryTpl,TEST_META);
            $('[role="btn"]').each(function () {
                var btnID = $(this).data('btnid');
                if(btnID){
                    switch (btnID){
                        case 'preview':
                            $(this).on('click',function () {$lamp.preview();});
                            break;
                        case 'print':
                            $(this).on('click',function () {$lamp.print();});
                            break;
                        case 'getTemplate':
                            $(this).on('click',function () {
                                var tplData = $lamp.getTemplate();
                                console.log(tplData);
                                var metaItems = Properties.getMetaOptions();
                                console.log(metaItems);
                            });
                            break;
                        case 'saveTemplate':
                            $(this).on('click',function () {$lamp.saveTemplate();});
                            break;
                        case 'closeDesigner':
                            $(this).on('click',function () { $lamp.closeDesigner();});
                            break;
                        case 'tplSettings':
                            Properties.show($(this),'table.lampTTP[ name="tplSetting"]');
                            break;
                    }
                }
                return true;
            });
        }

    });
</script>
</body>
</html>